<template>
  <el-card body-style="min-height: 86vh">
    <!-- 搜索 -->
    <el-form :model="searchForm">
      <el-row :gutter="20">
        <el-col :span="6"
          ><el-form-item label="供应商名称">
            <el-input
              v-model="searchForm.supplierName"
              placeholder="请输入供应商名称"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="联系人">
            <el-input
              v-model="searchForm.contactPerson"
              placeholder="请输入联系人"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item label="联系电话">
            <el-input
              v-model="searchForm.contactPersonPhone"
              placeholder="请输入联系电话"
            ></el-input> </el-form-item
        ></el-col>
        <el-col :span="6"
          ><el-form-item>
            <el-button @click="handleRestSearch()">重置</el-button>
            <el-button type="primary" @click="handleGetTableList()">搜索</el-button>
          </el-form-item></el-col
        >
      </el-row>
    </el-form>
    <el-divider />
    <!-- 新增、筛选按钮 -->
    <div class="flex justify-between">
      <div>
        <el-button type="primary" @click="handleCreate()">新增</el-button>
      </div>
      <div>
        <el-button circle @click="handleGetTableList()">
          <template #icon
            ><el-icon> <Refresh /> </el-icon
          ></template>
        </el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table :data="tableData">
      <el-table-column prop="supplierName" label="供应商名称" />
      <el-table-column prop="contactPerson" label="联系人" />
      <el-table-column prop="contactPersonPhone" label="联系电话" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="primary" @click="handleEdit(row)">编辑</el-button>
          <el-popconfirm title="你确定要删除该供应商?" width="200" @confirm="handleDelete(row)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      class="flex justify-center mt-2"
      background
      layout="total,prev, pager, next"
      :current-page="currentPage"
      :page-size="limit"
      :total="total"
      @current-change="handleGetTableList"
    />
    <form-drawer ref="formDrawerRef" @submit="handleSubmit()">
      <el-form ref="formRef" :model="form" :rules="rules" label-width="120">
        <el-form-item label="供应商名称" prop="supplierName">
          <el-input v-model="form.supplierName" />
        </el-form-item>
        <el-form-item label="联系人" prop="contactPerson">
          <el-input v-model="form.contactPerson" />
        </el-form-item>
        <el-form-item label="联系电话" prop="contactPersonPhone">
          <el-input v-model="form.contactPersonPhone" />
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" />
        </el-form-item>
      </el-form>
    </form-drawer>
  </el-card>
</template>
<script setup lang="ts">
import { useInitTable, useInitForm } from "@/hooks/useCommon";
import FormDrawer from "@/components/FormDrawer.vue";
import {
  getSupplierPageApi,
  addSupplierApi,
  editSupplierApi,
  deleteSupplierApi
} from "@/api/stock";

//表格
const {
  searchForm,
  tableData,
  currentPage,
  limit,
  total,
  handleRestSearch,
  handleGetTableList,
  handleDelete
} = useInitTable({
  searchForm: {
    supplierName: "",
    contactPerson: "",
    contactPersonPhone: ""
  },
  getTableList: getSupplierPageApi,
  deleteData: deleteSupplierApi
});

// 新增编辑
const { formDrawerRef, formRef, form, rules, handleCreate, handleEdit, handleSubmit } = useInitForm(
  {
    form: {
      supplierName: "",
      contactPerson: "",
      contactPersonPhone: "",
      remark: ""
    },
    rules: {
      supplierName: [{ required: true, message: "请输入供应商名称", trigger: "blur" }],
      contactPerson: [{ required: true, message: "请输入联系人", trigger: "blur" }],
      contactPersonPhone: [
        { required: true, message: "请输入联系电话", trigger: "blur" },
        { pattern: /^1[3456789]\d{9}$/, message: "请输入正确的手机号", trigger: "blur" }
      ]
    },
    createData: addSupplierApi,
    updateData: editSupplierApi,
    success: () => {
      handleGetTableList(currentPage.value);
    }
  }
);
</script>
<style scoped lang="scss"></style>
